<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in singerStyle" :key="index" @click="handleChangeView(item)"
          :class="{active:item.name == activeName}">
        {{item.name}}
      </li>
    </ul>
    <div >
      <content-list :content-list="data"></content-list>
    </div>
    <div class="pagination">
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="handleCurrentChange"
        :current-page ="currentPage"
        :page-size="pageSize"
        :total="albumDatas.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import ContentList from '../components/ContentList';
  import {getAllSinger,getSingerOfSex} from '../api/index';
  import {mixin} from "../mixins";
  import {singerStyle} from '../assets/data/singer';
  export default {
    name: 'Singer',
    mixins:[mixin],
    components:{
      ContentList
    },
    computed:{
      //计算当前表格中的数据
      data(){
        return this.albumDatas.slice((this.currentPage - 1)*this.pageSize,this.currentPage*this.pageSize)
      }
    },
    data(){
      return{
        singerStyle: [],           //风格
        albumDatas: [],      //歌手数据
        pageSize: 15,        //页面大小，一页有15条数据
        currentPage: 1,      //当前页，默认第一页
        activeName: '全部歌手'    //当前风格
      }
    },
    mounted(){
      this.singerStyle = singerStyle
      this.getSingerList();
    },
    methods:{
      getSingerList(){
        getAllSinger()
          .then(res =>{
            this.currentPage = 1;
            this.albumDatas = res;
          })
      },
      //获取当前页
      handleCurrentChange(val){
        this.currentPage = val;
      },
      //根据style显示对应的歌单
      handleChangeView(item){
        this.albumDatas = [];
        this.activeName = item.name
        if(item.name =='全部歌手'){
          this.getSingerList()
        }else {
          this.getSingerOfSex(item.type)
        }
      },
      //根据性别查询对应的歌手
      getSingerOfSex(sex){
        getSingerOfSex(sex)
          .then(res =>{
            this.currentPage = 1;
            this.albumDatas = res;
          })
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/singer.scss';
</style>
